<template>
	<div class="zhengtuojianhuo">
		<van-nav-bar :fixed="true" class="navBar" title="商品属性" left-arrow @click-left="$router.go(-1)"></van-nav-bar>




		<div class="goodsFromWarp">
				<div class="goodsInputWarp">
						<div class="goodsInputLabel">
							<div class="goodsInputBorder"></div>
							<div class="skuName">商品编码：</div>
						</div>
						<van-field
							 class="skuInput"
							 v-model="editForm.itemid"
							 placeholder="请填写商品编码"
							 clearable
						 />
				</div>


				<div class="goodsInputWarp">
						<div class="goodsInputLabel">
							<div class="goodsInputBorder"></div>
							<div class="skuName">出货类型：</div>
						</div>

						<div class="skuNoInput">
							{{skuRow.lxdesc}}  {{skuRow.jxcwno}}
						</div>
				</div>

				<div class="goodsInputWarp">
						<div class="goodsInputLabel">
							<div class="goodsInputBorder"></div>
							<div class="skuName">商品：</div>
						</div>

						<div class="skuNoInput">
							{{skuRow.subsname}}
						</div>
				</div>

				<div class="goodsInputWarp">
						<div class="goodsInputLabel">
							<div class="goodsInputBorder"></div>
							<div class="skuName">条码：</div>
						</div>

						<div class="skuNoInput">
							{{skuRow.sptmid}}
						</div>
				</div>


				<div class="goodsInputWarp">
						<div class="goodsInputLabel">
							<div class="goodsInputBorder"></div>
							<div class="skuName">出货属性：</div>
						</div>

						<div class="skuNoInput">
							{{editForm.njxcwlxName}}
						</div>

						<div class="searchBtn">
							<button :disabled="isdisabled"  @click.stop="selectShuXing()" >
								<van-icon name="ellipsis" color="#1989fa"  />
							</button>
						</div>
				</div>

				<div class="goodsInputWarp">
						<div class="goodsInputLabel">
							<div class="goodsInputBorder"></div>
							<div class="skuName">货区：</div>
						</div>

						<div class="skuNoInput">
							{{editForm.hqdesc}}
						</div>

						<div class="searchBtn">
							<button :disabled="isdisabled"  @click.stop="huoquShow = true" >
								<van-icon name="ellipsis" color="#1989fa"  />
							</button>
						</div>

				</div>


		</div>


		<div class="skuBtn">
			<van-button type="info" :disabled="isdisabled" @click="lingquBtn()">查看库存</van-button>
			<van-button type="info" :disabled="isdisabled" @click="bianGengBtn()">变更属性</van-button>
		</div>

		<van-action-sheet v-model="isShow" :actions="actions" @select="onSelect" />

		<van-popup v-model="huoquShow" position="bottom" :style="{ height: '300px' }"  >
			<van-picker
			  title="货区"
			  show-toolbar
				label="hqdesc"
				value-key="hqdesc"
			  :columns="huoquData"
			  @confirm="onConfirm"
			/>
		</van-popup>

		<div class="carCardWarp">

			<div class="carCard" v-for="(item,index) in lingquData" :key="index">

				<div class="goodsTitleRow" style="margin-bottom: 10px;">
						<div class="goodsTitleLabel">
							<div class="skuName">商品：</div>
						</div>
						<div class="skuNoTitle">
						{{item.itemid}}-{{item.subsname}}
						</div>
				</div>

				<van-row class="goodRow" style="margin-top: 10px;">
				  <van-col span="12"> <span>编码:</span>{{item.itemid}}</van-col>
				  <van-col span="12"> <span>子码:</span>{{item.subid}}</van-col>
				</van-row>

				<van-row class="goodRow">
				  <van-col span="24"> <span>仓位类型:</span>{{item.bt}}</van-col>
				</van-row>

				<van-row class="goodRow" style="margin-top: 10px;">
				  <van-col span="24"> <span>仓位:</span>{{item.cwnos}}</van-col>
				</van-row>

				<van-row class="goodRow" style="margin-top: 10px;">
				  <van-col span="24"> <span>总数量:</span>{{item.tqty}} {{item.username}}</van-col>
				</van-row>


			</div>
		</div>
	</div>
</template>

<script>

export default {
  name: 'shangpinshuxing',
  data() {
    return {
			editForm:{
				itemid:'',
				njxcwlx:'',
				nhq:'',
				njxcwlxName:'',
				hqdesc:'',
			},
			skuRow:{},
			huoquData:[],
			isdisabled:false,
			lingquData:[

			],
			isLingQuVisible:false,
			isShow:false,
			huoquShow:false,
			actions: [
				{name: 'JJ静态拣货' ,value: 'JJ'},
				{name: 'DJ动态拣货' ,value: 'DJ'},
				{name: 'PL批量拣货' ,value: 'PL' },
			],
			columns: [],
		};
  },
	computed: {
		 ryuser: function(){
			 return this.GWO(true).gUSER;
		 },
	},
  methods: {
		onSelect(row){
			console.log(row)
			this.editForm.njxcwlx = row.value
			this.editForm.njxcwlxName = row.name
			this.isShow = false
		},
		selectShuXing(){
			this.isShow = true
		},
		lingquBtn(){
			var _self = this;
			var ldemodata = [{retval:0, errmsg:'返回数据集'},]
			this.MYPOST({
					'method':'dgate',
					'pname':'f_wmsa_y_chaxun',
					'i':this.FNULLE([
					'opmode','Y_SPSX_qryitemid',
						'czyid',this.ryuser.operatorid,
						'kqid', this.ryuser.kqid,
						'itemid',this.editForm.itemid,
					])
				},'商品属性',true, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
				if(ret_iserr){ //传入的true参数,理论上不会有此回调了
					_self.$toast.fail('查询失败')
					_self.$store.commit('hideLoading');
				}else{
					var rtn_json_obj = null;
					_self.$store.commit('hideLoading');
					if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
					}else{  rtn_json_obj = _self.arr2Obj(ret_oldresp.data); //非标准的dgate接口,返回的一个不兼容的处理
					}
					console.log("得到商品属性")
					console.log(rtn_json_obj)
					_self.lingquData = rtn_json_obj
					_self.skuRow = rtn_json_obj[0]
					_self.selectHuoQu();
				}
			});
		},
		selectHuoQu(){
			var _self = this;
			var ldemodata = [{retval:0, errmsg:'返回数据集'},]
			this.MYPOST({
					'method':'dgate',
					'pname':'f_wmsa_y_chaxun',
					'i':this.FNULLE([
					'opmode','Y_SPSX_qryhqid',
						'czyid',this.ryuser.operatorid,
						'kqid', this.ryuser.kqid,
						'itemid',this.skuRow.itemid,
						'subid',this.skuRow.subid,
					])
				},'货区',true, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
				if(ret_iserr){ //传入的true参数,理论上不会有此回调了
					_self.$toast.fail('查询失败')
					_self.$store.commit('hideLoading');
				}else{
					var rtn_json_obj = null;
					_self.$store.commit('hideLoading');
					if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
					}else{  rtn_json_obj = _self.arr2Obj(ret_oldresp.data); //非标准的dgate接口,返回的一个不兼容的处理
					}
					console.log("得到货区")
					console.log(rtn_json_obj)
					_self.huoquData = rtn_json_obj
				}
			});
		},
		onConfirm(value, index){
			console.log(value)
			this.editForm.nhq = value.nhq
			this.editForm.hqdesc = value.hqdesc
			this.huoquShow = false
		},
		bianGengBtn(){
			console.log(this.editForm)
			if(this.editForm.nhq >'' && this.editForm.njxcwlx >''){
				this.$dialog.confirm({
				  title: '提示',
				  message:'是否将商品'+ this.skuRow.itemid+'修改为'+ this.editForm.njxcwlx+',存放货区'+ this.editForm.nhq,
				}).then(() => {
				   this._getBianGeng()
				}).catch(() => {

				});
			}
		},
		_getBianGeng(){
			var _self = this;
			var ldemodata = [{retval:0, errmsg:'返回数据集'},]
			this.MYPOST({
					'method':'dgate',
					'pname':'f_wmsa_y_chaxun',
					'i':this.FNULLE([
					'opmode','Y_SPSX_bgccsx',
						'czyid',this.ryuser.operatorid,
						'kqid', this.ryuser.kqid,
						'itemid',this.skuRow.itemid,
						'subid',this.skuRow.subid,
						'njxcwlx',this.editForm.njxcwlx,
						'wltype',this.skuRow.wltype,
						'ynhz',this.skuRow.ynhz,
						'nhq',this.editForm.nhq,
					])
				},'保存变更',true, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
				if(ret_iserr){ //传入的true参数,理论上不会有此回调了
					_self.$toast.fail('查询失败')
					_self.$store.commit('hideLoading');
				}else{
					var rtn_json_obj = null;
					_self.$store.commit('hideLoading');
					if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
					}else{  rtn_json_obj = _self.arr2Obj(ret_oldresp.data); //非标准的dgate接口,返回的一个不兼容的处理
					}
					console.log("得到保存变更")
					console.log(rtn_json_obj)
					if(rtn_json_obj[0].ret_ret == '-1'){
						_self.$toast(rtn_json_obj[0].ret_mess)
					}else{
						_self.$toast(rtn_json_obj[0].ret_mess)
						_self.skuRow = {};
						_self.editForm = {
							itemid:'',
							njxcwlx:'',
							nhq:'',
							njxcwlxName:'',
							hqdesc:'',
						}
						_self.lingquData = []
					}
				}
			});
		},
  },
  mounted() {

  },
	components: {

	},
};
</script>

<style lang="scss" scoped>
	// 引入公共样式
	@import '@/assets/css/base.scss';
	@import '@/assets/css/input.scss';
	div.zhengtuojianhuo{
		padding-top: 50px;
	}



	div.carCardWarp{
		width: 94%;
		margin-left: 3%;
		margin-right: 3%;
		margin-top: 20px;
		font-weight: bold;
		font-size: 20px;
		div.carCard{
			position: relative;
			border-left: 5px solid #4998FF;
			box-sizing: border-box;
			padding-left: 10px;
			padding-right: 10px;
			border-radius:5px;
			background-color: #fff;
			padding-top: 10px;
			padding-bottom: 10px;
			margin-bottom:15px;
			div.status{
				position: absolute;
				right: 0;
				top: 0;
				width: 65px;
				height: 30px;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				font-size: 12px;
				border-radius: 0px 10px 0px 10px;
			}
			div.goodRow{
				margin-bottom:8px;
				span{
					display: inline-block;
					width:100px;
				}
			}
			div.goodsTitleRow{
				display: flex;
				width: 100%;
				div.goodsTitleLabel{
					width: 100px;
				}
				div.skuNoTitle{
					width: calc(100% - 100px);
				}
			}
		}
	}
</style>
